<template>
  <div>

    <li>
      <span class="tm" @contextmenu.prevent @click="toggle($event)" @contextmenu="operation($event)">
        <!--<i :class="['icon', (isFolder || isDynamicFolder) ? folderIcon : 'file-text']"></i>-->
        <i :class="['icon', (isFolder || isDynamicFolder) ? folderIcon : 'file-text']" />
        {{ model.i18nName == null ? model.i18nPermName : model.i18nName }}
        <div class="showMenu" @click.stop="">
          <p v-if="isFolder" @click="runterData(model , 1 )">新增菜单</p>
          <p v-if="isFolder" @click="runterData(model , 2 )">修改菜单</p>
          <!--<p v-if="isFolder" @click="runterData(model , 3)">查看菜单</p>-->
          <p v-if="isFolder" @click="runterData(model , 4 )">删除菜单</p>

          <p v-if="isFolder" @click="runterData(model , 5 )">新增权限</p>
          <!--<p v-if="" @click="runterData(model , 6 )">修改权限</p>-->
          <!--<p v-if="" @click="runterData(model , 7 )">查看权限</p>-->
          <p v-if="" @click="runterData(model , 8 )">删除权限</p>
          <!--<p v-else @click="runterData(model , 4 )">修改权限</p>-->
          <p @click="removeMenu">取消</p>
        </div>
      </span>

      <ul v-if="isOpen">
        <tree-menu v-for="item in model.children" :key="item.id" :model="item" />
        <tree-menu v-for="item in model.permissions" :key="item.id" :model="item" />
      </ul>
    </li>

  </div>
</template>

<script>
import { bus } from '../../../bus'

export default {
  name: 'TreeMenu',
  props: {
    model: Object,
    subMenuData: Object
  },
  data() {
    return {
      folderIcon: 'folder',
      isDynamicFolder: false,
      isOpen: false
    }
  },
  computed: {
    isFolder() {
      // return !!(this.model.children && this.model.children.length)
      // return !!(this.model.children )
      return !!(this.model.permissions)
    }
  },
  watch: {
    isDynamicFolder() {
      this.isOpen = true
      this.folderIcon = 'folder-open'
    }
  },
  created() {

  },
  methods: {
    toggle(ev) {
      const menuData = this.model
      const subMenuData = this.subMenuData
      if (!menuData.children) {
        this.isDynamicFolder = !!(menuData.children && menuData.children.length)
        this.isOpen = true
        this.folderIcon = 'folder-open'
        bus.$emit('dataTypeList', menuData)
        var tm = document.getElementsByClassName('tm')
        var tmLEn = tm.length
        for (var i = 0; i < tmLEn; i++) {
          tm[i].style.background = ''
          tm[i].style.color = '#000'
        }
        ev.target.style.background = '#409EFF'
        ev.target.style.color = '#fff'
        // console.log();.
      }
      if (this.isFolder || this.isDynamicFolder) {
        this.isOpen = !this.isOpen
        this.folderIcon = this.isOpen ? 'folder-open' : 'folder'
      }
    },

    // 右击打开选择菜单
    operation(ev) {
      this.removeMenu()
      console.log(ev.target.children[1])
      ev.target.children[1].style.display = 'block'
      var mTop = ev.offsetY
      var mLeft = ev.offsetX
      ev.target.children[1].style.top = mTop - 20 + 'px'
      ev.target.children[1].style.left = mLeft + 'px'

      // this.removeMenu();
      // ev.currentTarget.children[1].style.top = mTop + 45 + "px";
      // ev.currentTarget.children[1].style.left = mLeft + 50 + "px";
      // ev.currentTarget.path[1].children[1].style.display = "block"
    },

    // 移除右击菜单Menu
    removeMenu() {
      var sm = document.getElementsByClassName('showMenu')
      var smLen = sm.length
      for (var i = 0; i < smLen; i++) {
        sm[i].style.display = 'none'
      }
    },

    // 返回事件类型以及数据
    // 1 新增菜单
    // 2 修改菜单
    // 3 查看菜单
    // 4 删除菜单

    // 5 新增权限
    // 6 修改权限
    // 7 查看权限
    // 8 删除权限

    runterData(data, type) {
      var temp = {
        data: data,
        type: type
      }
      console.log(temp)
      bus.$emit('getRueurnData', temp)
    }
  }
}
</script>

<style>
  .showMenu{
    width:100px;
    /*height:20px;*/
    background:#e8e8e8;;
    position: relative;
    top:0;
    left: 0;
    display: none;
    color:#424242;
    text-align: center;
    font-size: 12px;
    z-index: 999;
    border-radius: 5px;
    padding-top: 1px;
    cursor:pointer
  }

  .showMenu p{
    width:100%;
    height:20px;
    line-height: 10px;
    border-bottom: #d6d1d1 1px solid;
  }

  ul {
    list-style: none;
    cursor:pointer
  }
  i.icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    vertical-align: middle;
  }
  .icon.folder {
    background-image: url('~@/assets/common/folder.png');
  }
  .icon.folder-open {
    background-image: url('~@/assets/common/folder-open.png');
  }
  .icon.file-text {
    background-image: url('~@/assets/common/file-text.png');
  }
  .tree-menu li {
    /*width: 150px;*/
    line-height: 1.5;
  }

  .tree-menu li span{
    position: relative;
    display: block;
    height: 20px;
  }

  .bgC{
    background-color: #A3B6D4;
  }
</style>
